<template>
  <div id="my-footer">
    <!-- 标题 -->
    <div class="title">我的足迹</div>
    <!-- 内容 -->
    <div class="content" :style="paddingStyle">
      <!-- 时间分组 -->
      <div class="time-group" v-for="(goodsInfo, index) in goodsInfos" :key="index">
        <div class="time-number">
          <span class="time" v-text="goodsInfo.mobileDate"></span>
          <span class="date">{{goodsInfo.date | getDate}}</span>
          <span class="number">{{goodsInfo.count}}件宝贝</span>
        </div>
        <!-- 商品 -->
        <div class="item mt20" v-for="(goods, index) in goodsInfo.ftList" :key="index" v-show="index < 10 || goodsInfo.showNextList">
          <goods-item :goods-info="goods" :theme="2"></goods-item>
        </div>
        <!-- 展开按钮 -->
        <div class="deploy" v-show="goodsInfo.ftList.length > 10 && !goodsInfo.showNextList" @click="showAllFooter(goodsInfo)"></div>
        <!-- 清除浮动 -->
        <div class="clear"></div>
      </div>
      <!-- 分页组件 -->
      <div class="pb20" v-if="totalPage > 1">
        <w-paging :total="totalPage" :current="currentPage" @on-page="onPage"></w-paging>
      </div>
    </div>
  </div>
</template>

<script>
import goodsItem from '../search/components/GoodsItem'
// 我的足迹接口
import { apiFootPrint } from 'js/api'
export default {
  components: {
    goodsItem
  },
  data() {
    return {
      goodsInfos: [],
      currentPage: 1,
      totalPage: 1,
      showCount: 2
    }
  },
  created() {
    this.getFooter()
  },
  computed: {
    paddingStyle() {
      // 如果数据不存在，则返回空字符串
      if (!this.goodsInfos || this.goodsInfos.length == 0) {
        return ''
      }

      // 获取最后一个时间
      let goodsInfo = this.goodsInfos[this.goodsInfos.length - 1]

      // 如果最后一个记录没有商品
      if (!goodsInfo.ftList || goodsInfo.ftList.length <= 10) {
        return ''
      }

      return {'padding-bottom': '1px'}
    }
  },
  methods: {
    /**
     * 获取我的足迹数据
     * @return {[type]} [description]
     */
    getFooter() {
      apiFootPrint(this.$store.getters.token, this.currentPage, this.showCount).then((data) => {
        this.goodsInfos = data.footPointList

        // 遍历所有商品，将商品数量超过10的隐藏起来
        this.goodsInfos.forEach((v) => {
          // 默认隐藏超过10个的商品
          this.$set(v, 'showNextList', false)
        })

        this.totalPage = Number(data.totalPageCount)
      })
    },
    // 点击下一页
    onPage(index) {
      this.currentPage = index
      this.getFooter()
    },

    /**
     * 展示所有的足迹
     * @param  { Object } goodsInfo 商品信息
     */
    showAllFooter(goodsInfo) {
      goodsInfo.showNextList = true
    }
  },
  filters: {
    getDate(date) {
      let dat = new Date().getDate()
      if (dat == date.slice(2, 4)) {
        return '今天'
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../../scss/_var.scss';
  #my-footer {
    background-color: #FFFFFF;

    .title {
      border-bottom: 1px solid #DDDDDD;
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      padding-left: 20px;
      color: $color-dark;
    }

    .content {
      margin-top: 20px;

      .time-group {
        margin-bottom: 52px;
        margin-left: 24px;
        padding-left: 24px;
        position: relative;
        &:last-child {
          margin-bottom: 0;
        }
        .time-number {
          padding: 0px 0px 12px 0px;

          .time {
            color: #444444;
            font-size: 14px;
            margin-right: 22px;
          }

          .date, .number {
            color: #666666;
            font-size: 14px;
            margin-right: 20px;
          }
        }

        &:after {
          background-color: #DDDDDD;
          content: "";
          display: block;
          position: absolute;
          height: calc(100% - 29px);
          width: 1px;
          top: 9px;
          left: 0px;
        }

        &:before {
          background: url(../../assets/point.png) center center no-repeat;
          content: "";
          display: block;
          width: 18px;
          height: 18px;
          position: absolute;
          top: 0px;
          left: -9px;
          z-index: 10;
        }

        .item {
          display: inline-block;
          float: left;
          margin-right: 20px;
          margin-bottom: 20px;
        }

        .deploy {
          background-image: url('../../assets/show-all.png');
          background-repeat: no-repeat;
          bottom: -20px;
          cursor: pointer;
          height: 14px;
          left: 0px;
          width: 66px;
          position: absolute;
          text-align: center;

          &.close {
            transform: rotateX(180deg);
          }
        }
      }
    }
  }
  .clear {
    clear: both;
  }
  .pb20 {
    padding-bottom: 20px;
  }
</style>